<!-- 页面 -->
<template>
	<su-popup :show="show" @show="onPopupShow" type="bottom" round="20" backgroundColor="#f2f2f2"
		style="width: 60%;">
		<view style="width: 800px;height: auto; min-height: 400px;background-color:#FFFFFF;" class="p-3">
			<view class="d-flex align-items-stretch channel-title-box">
				<h4 class="channel-title">学习概况</h4>
			</view>
			<s-empty v-if="state.list.length === 0" icon="/static/order-empty.png" text="快去学习吧"></s-empty>
			<view v-if="state.list.length > 0" class="uni-container">
				<uni-table ref="table" :loading="loading" border stripe width="100%">
					<uni-tr style="background-color: #eeeeee">
						<uni-th width="100" align="center"></uni-th>
						<uni-th width="500" align="center">课件名称</uni-th>
						<uni-th align="center">时长</uni-th>
						<uni-th align="center">观看时长</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in state.list" :key="index">
						<uni-td align="center">{{ index + 1 }}</uni-td>
						<uni-td>
							<view class="name">{{ item.lesson_name }}</view>
						</uni-td>
						<uni-td align="center">{{ timeFormat(item.TotalSecond) }}</uni-td>
						<uni-td align="center">{{ timeFormat(item.LearnSecond) }}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</view>
	</su-popup>
</template>

<script setup>
	import {
		computed,
		onMounted,
		onUpdated,
		reactive,
	} from 'vue';
	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {
		formatOrderColor
	} from '@/sheep/hooks/useGoods';
	import sheep from '@/sheep';
	import _ from 'lodash';
	import {
		isEmpty
	} from 'lodash';
	import SuPopup from '@/sheep/ui/su-popup/su-popup.vue';
	const tradeManaged = computed(() => sheep.$store('app').has_wechat_trade_managed);

	// 数据
	const state = reactive({
		currentTab: 0,
		list: [],
		loadStatus: '',
		pgList: 20,
		id: 0,
		show: false,
	});
	const props = defineProps({
		id: {
			type: Number,
			required: true,
		},
	});
	//alert(state.show);

	// 获取订单列表
	async function getUserReport(id) {
		state.loadStatus = 'loading';
		let res = await sheep.$api.course.getStudyReportDetail({
			'id': id
		});
		state.error = res.error;
		if (res.code === 1) {
			console.log(res)
			state.list = res.data;
		}
	}
	onMounted(async function() {
		getUserReport(props.id);
	});
	onUpdated(

		async (options) => {
			//alert(state.show);
			console.log(props.id);
			getUserReport(props.id);
		}
	);
	//alert(id);
	/*onLoad(function(){
    if(state.show){
      alert(state.show);
        getUserReport(props.id);
    }
	});*/

	function onPopupShow() {
		console.log("12121212");
	}

	function onOpenDetail(orderitemid) {
		sheep.$router.go('/pages/study/bzdetail', {
			'id': orderitemid,
		});
	}

	function timeFormat(time) {
		var t = parseInt(time),
			h, i, s
		h = Math.floor(t / 3600)
		h = h ? (h + ':') : ''
		i = h ? Math.floor(t % 3600 / 60) : Math.floor(t / 60)
		s = Math.floor(t % 60)
		i = i > 9 ? i : '0' + i
		s = s > 9 ? s : '0' + s
		return (h + i + ':' + s)
	}
</script>

<style lang="scss" scoped>
	.study-table {
		.uni-thr {
			.uni-th {
				padding: 10px 20px;
				display: inline-block;
				font-weight: bold;
			}
		}

		.uni-tr {
			.uni-td {
				padding: 10px 20px;
				display: inline-block;
				text-align: center;

			}
		}
	}

	.channel-title-box {
		display: flex;
		align-items: flex-start;
	}

	.channel-title {
		font-size: 20px;
		font-weight: bold;
		flex: 1 1 auto !important;
	}

	.uni-container {
		margin: 10px;
	}

	::v-deep .uni-table {
		min-width: 0px !important;
		border: 1px solid #e1e1e1;
	}
</style>